<template>
  <div class="app-box">
    <Header></Header>
    <SwitchEngine @engine-change="handleEngineChange"></SwitchEngine>
    <SwitchModel @model-change="handleModelChange"></SwitchModel>
    <router-view />
    <Footer></Footer>
  </div>
</template>

<script setup lang="ts">
import { ESObjectsManager, ESWidget } from 'earthsdk3';
import Header from './components/Header.vue';
import Footer from './components/Footer.vue';
import SwitchEngine from './components/SwitchEngine.vue';
import SwitchModel from './components/SwitchModel.vue';
import { getSceneObj } from './scripts/getobjm';

import { provide, ref } from 'vue';
import { useRouter, useRoute } from 'vue-router'
import { Destroyable } from 'xbsj-base';

const router = useRouter()
const route = useRoute()

const props = withDefaults(defineProps<{ objm: ESObjectsManager; pickedId: string }>(), {});
provide('objm', props.objm);
provide('pickedId', props.pickedId)



const eSWidget = props.objm.createSceneObject(ESWidget, 'esWidget1')
// 设置初始位置
eSWidget.position = [116.39164622716487, 39.906734670180654, 11.757532098411325];
// 显示面板信息
eSWidget.info = {
  "title": "基本信息",
  "id": "054b82b7b2f5f6cf6533187bc98fe733",
  "种类": "屋顶",
  "科": "基本屋顶",
  "体积": "570.84 m³",
}
eSWidget.show = false

const pickedTilesetInfo = ref(null);
provide('pickedTilesetInfo', pickedTilesetInfo);


const bimModel = ref(null);
provide('bimModel', bimModel);

props.objm.viewerCreatedEvent.don((viewer) => {
  viewer.depthTestAgainstTerrain = true
  //鼠标双击事件
  // viewer.dblclickEvent.don((e) => {
  //   viewer.pick(e.screenPosition, 'customPick').then(res => {
  //     if (res && res.sceneObject) {
  //       console.log("拾取到的 3D 对象:", res.sceneObject);

  //       // 显示 Modal，并在其中嵌入百度页面
  //       showModal("/data/alarm.mp4");
  //     }
  //   })
  // })

  // 鼠标单击事件
  viewer.clickEvent.don((e) => {
    // pickPosition拾取经纬度
    viewer.pickPosition(e.screenPosition).then((position) => {
      if (!position || !position.length) return;
      eSWidget.position = [...position];
    });
    // pick拾取
    viewer.pick(e.screenPosition, "customPick").then((res) => {
      const es3DTileset = getSceneObj(props.objm, "bim-model1")
      es3DTileset.resetFeatureStyle()
      eSWidget.show = false

      // 判断是否拾取到信息
      if (!res || !res.tilesetPickInfo) {
        pickedTilesetInfo.value = undefined
        return;
      }

      console.log("拾取属性信息", res.tilesetPickInfo)
      const tilesetPickInfo = res.tilesetPickInfo

      // tilset属性信息
      // featureId
      const id = tilesetPickInfo.id
      // if (e.pointerEvent?.button == 2) {

      // }
      pickedTilesetInfo.value = tilesetPickInfo
      const name = tilesetPickInfo.name
      // 高亮Feature
      es3DTileset.setFeatureColor("id", [{
        value: id,
        rgba: [1, 0, 0, 1],
      }])
      // 整理面板显示内容
      const data = {
        title: "基本信息",
        id: id,
        名称: name,
      }
      eSWidget.info = data
      //     eSWidget.show = true
    })
  })
})

const handleEngineChange = (engine) => {
  const es3DTileset = getSceneObj(props.objm, "bim-model1")
  if (engine == 'Cesium') {
    resetTileset(props.objm, es3DTileset)
  }
};

const handleModelChange = (model) => {
  bimModel.value = model
  const es3DTileset = getSceneObj(props.objm, "bim-model1")
  resetTileset(props.objm, es3DTileset)
};

function resetTileset(objm: ESObjectsManager, es3DTileset: ES3DTileset) {
  if (objm.activeViewer.getEngineType() != 'ESCesiumViewer') return
  const temp1 = objm.activeViewer.getEngineObject(es3DTileset);
  const destroy = new Destroyable();
  destroy.ad(
    temp1.czm3DTiles.tilesetChanged.don((czm3DTiles) => {
      if (!czm3DTiles) return;
      destroy.ad(czm3DTiles.tilesetChanged.don(cesiumTilest => {
        cesiumTilest.imageBasedLighting.imageBasedLightingFactor.x = cesiumTilest.imageBasedLighting.imageBasedLightingFactor.y = 0.5;
        const environmentMapManager = cesiumTilest.environmentMapManager;
        environmentMapManager.saturation = 0.35;
        environmentMapManager.brightness = 1.4;
        environmentMapManager.gamma = 0.8;
        environmentMapManager.atmosphereScatteringIntensity = 5.0;
        environmentMapManager.groundColor = Cesium.Color.fromCssColorString("#001850");
        environmentMapManager.reset()
        destroy.destroy();
      }))
    })
  )
}

</script>
<style scoped>
.app-box {
  width: 100%;
  height: 100%;
  position: relative;
}
</style>
